{% extends "main.html" %}
{% block tabs %}
{{ super() }}
<style>
    /* hide the main content on the home page.
    we're gonna do it all ourself. */
    html {
        scroll-behavior: smooth;
    }

    body {
        background-image: linear-gradient(0deg,
                hsl(272deg 33% 11%) 0%,
                hsl(276deg 30% 9%) 31%,
                hsl(279deg 29% 7%) 55%,
                hsl(282deg 24% 4%) 71%,
                hsl(313deg 30% 7%) 82%,
                hsl(307deg 47% 17%) 89%,
                hsl(305deg 62% 26%) 93%,
                hsl(304deg 80% 33%) 96%,
                hsl(311deg 94% 38%) 98%,
                hsl(318deg 98% 42%) 99%,
                hsl(324deg 100% 46%) 100%,
                hsl(329deg 100% 50%) 100%);
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: auto;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: "Open Sans", sans-serif;
        font-weight: 800 !important;
    }

    /* .md-content{display:none} */
    .md-dialog {
        display: none;
    }

    .hero-text {
        padding: 0.4rem 1.8rem;
        text-align: left;
        max-width: 900px;
        margin: 0 auto;
    }

    .hero-image svg {
        width: 100%;
        /* Make SVG responsive */
        height: auto;
        /* Maintain aspect ratio */
        max-width: 1000px;
        /* Maximum width of SVG */
        max-height: 55vh;
        display: block;
        /* Center SVG */
        margin: 0 auto;
        /* Center SVG */
        padding: 1rem 1.2rem 1rem 1.2rem;
    }

    #home-title {
        margin: 0 0 0.3rem 0;
    }
    }

    p#home-intro {
        font-size: 0.9rem;
    }

    div.md-nav__source {
        background-color: hsla(287deg, 100%, 10%, 0.8) !important;
    }

    #home-subtitle {
        font-family: "Roboto Mono", monospace;
        font-size: 1rem;
        line-height: 1.5rem;
        opacity: 92%;
        margin: 0 0 1rem 0;
        color: #f0f0f0;
        word-spacing: -0.05em;
    }

    .button-bar {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 1rem;
    }

    .gradient-text {
        background: linear-gradient(to left, #fbb3ff, #ee66bf);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .subtle-purple-glow {
        position: relative;
        z-index: 1;
        white-space: nowrap;
        display: inline-block;
    }

    .subtle-purple-glow::after {
        content: attr(data-text);
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1;
        color: rgba(255, 100, 203, 1);
        /* Very light pink/purple */
        filter: blur(8px);
        -webkit-filter: blur(8px);
        white-space: nowrap;
    }

    #hero-section {
        max-height: 88vh;
    }

    h2.feature-title {
        font-family: "Roboto Mono", monospace;
        font-size: 1.4rem;
        font-weight: 550;
        color: #f0f0f0;
        margin-bottom: 0.5rem;
        margin-left: 0.65rem;
        margin-top: 0.5rem;
    }

    .feature-title-text {
        max-width: 80%;
    }

    .feature-title-svg {
        max-width: 20%;
    }

    #features-section {
        padding: 6rem 1.4rem;
        display: flex;
        flex-direction: column;
        gap: 4rem;
    }

    .feature-image {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .feature-image img,
    .feature-image video {
        width: 100%;
        height: auto;
        border-radius: 8px;
        border: solid 2px rgba(255, 100, 203, 0.33);
        margin-top: 0.8rem;
    }

    #features-section .feature-description {
        color: #d0d0d0;
        font-size: 0.84rem;
        border-left: solid 2px rgba(255, 100, 203, 0.33);
        padding-left: 12px;
    }

    .feature-columns {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        padding: 2rem 1.4rem;
        position: relative;

        & .feature-column {
            position: relative;
            z-index: 1;

            & .feature-column-description {
                color: #d0d0d0;
                font-size: 0.9rem;
            }
        }
    }

    .feature-column::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle at top, rgba(230, 32, 240, 0.34) 0%, rgba(160, 32, 240, 0) 70%);
        filter: blur(20px);
        opacity: 0.7;
        z-index: -1;
        transition: opacity 0.3s ease;
    }

    .feature-column:hover::before {
        opacity: 1;
    }


    .feature-column {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 8px;
        padding: 1.5rem;
        border: 2px solid rgba(255, 100, 203, 0.2);
    }

    h3.feature-column-title {
        font-size: 1.2rem;
        font-weight: 550;
        color: #f0f0f0;
        margin: 0;
    }


    @media (min-width: 768px) {
        .feature-columns {
            flex-direction: row;
            justify-content: space-between;
        }

        .feature-column {
            flex-basis: calc(33.333% - 1.33rem);
        }
    }

    @media (min-width: 1024px) {
        .hero-text {
            padding: 0.4rem 2.4rem;
        }

        .hero-text h1 {
            font-size: 2rem;
            color: #f0f0f0;
        }

        #home-subtitle {
            font-size: 1.2rem;
            line-height: 1.7rem;
        }

        #home-intro {
            font-size: 1rem;
        }

        #features-section {
            max-width: 1200px;
            margin: 0 auto;
        }

        .feature-row {
            display: flex;
            align-items: space-between;
            gap: 2rem;
        }

        .feature-row:nth-child(even) {
            flex-direction: row-reverse;
        }

        .feature-text {
            flex: 1;
        }

        .feature-image {
            flex: 2;
        }

        .feature-image img,
        .feature-image video {
            margin-top: 0rem;
        }

        .feature-columns {
            max-width: 1200px;
            margin: 0 auto;
            padding: 4rem 2.4rem;
        }

        .feature-column-description {
            font-size: 1rem;
        }
    }

    @media (min-width: 1220px) {

        /* The sidebar content sits on top of the main content
        and makes some buttons unclickable. This is a hack to workaround
        that while keeping the sidebar working on screensizes where it's
        still required.*/
        body>div.md-container>main>div {
            display: none;
        }
    }

    @media (min-width: 1080px) {
        .feature-description {
            font-size: 1rem;
        }
    }
</style>
<section>
    <div id="hero-section" class="md-typeset">
        <div class="hero-image">
            <svg width="100%" height="100%" viewBox="0 0 1270 704" version="1.1" xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/"
                style="fill-rule:evenodd;clip-rule:evenodd;">
                <g transform="matrix(1,0,0,1,3.0232,-32.8644)">
                    <g transform="matrix(1,0,0,0.95092,0,35.9367)">
                        <path
                            d="M1262,9.413L1262,723.787C1262,728.43 1258.41,732.2 1254,732.2L9,732.2C4.585,732.2 1,728.43 1,723.787L1,9.413C1,4.77 4.585,1 9,1L1254,1C1258.41,1 1262,4.77 1262,9.413Z"
                            style="fill:rgb(15,15,31);stroke:url(#_Linear1);stroke-width:2px;" />
                    </g>
                    <g transform="matrix(1,0,0,1,9,41)">
                        <clipPath id="_clip2">
                            <rect x="0" y="0" width="1243.4" height="682.2" />
                        </clipPath>
                        <g clip-path="url(#_clip2)">
                            <rect x="0" y="1.5" width="1244.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="0" y="25.9" width="36.6" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="36.6" y="25.9" width="97.6" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="134.2" y="25.9" width="73.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="207.4" y="25.9" width="683.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="890.6" y="25.9" width="317.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1207.8" y="25.9" width="36.6" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="0" y="50.3" width="1244.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="0" y="74.7" width="36.6" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="36.6" y="74.7" width="12.2" height="24.65" style="fill:rgb(151,117,220);" />
                            <rect x="48.8" y="74.7" width="12.2" height="24.65" style="fill:rgb(151,117,220);" />
                            <rect x="61" y="74.7" width="36.6" height="24.65" style="fill:rgb(151,117,220);" />
                            <rect x="97.6" y="74.7" width="48.8" height="24.65" style="fill:rgb(151,117,220);" />
                            <rect x="146.4" y="74.7" width="12.2" height="24.65" style="fill:rgb(151,117,220);" />
                            <rect x="158.6" y="74.7" width="12.2" height="24.65" style="fill:rgb(151,117,220);" />
                            <rect x="170.8" y="74.7" width="12.2" height="24.65" style="fill:rgb(30,30,63);" />
                            <rect x="183" y="74.7" width="61" height="24.65" style="fill:rgb(30,30,63);" />
                            <rect x="244" y="74.7" width="36.6" height="24.65" style="fill:rgb(30,30,63);" />
                            <rect x="280.6" y="74.7" width="341.6" height="24.65" style="fill:rgb(30,30,63);" />
                            <rect x="622.2" y="74.7" width="12.2" height="24.65" style="fill:rgb(30,30,63);" />
                            <rect x="634.4" y="74.7" width="329.4" height="24.65" style="fill:rgb(30,30,63);" />
                            <rect x="963.8" y="74.7" width="24.4" height="24.65" style="fill:rgb(30,30,63);" />
                            <rect x="988.2" y="74.7" width="85.4" height="24.65" style="fill:rgb(30,30,63);" />
                            <rect x="1073.6" y="74.7" width="12.2" height="24.65" style="fill:rgb(30,30,63);" />
                            <rect x="1085.8" y="74.7" width="24.4" height="24.65" style="fill:rgb(138,43,226);" />
                            <rect x="1110.2" y="74.7" width="73.2" height="24.65" style="fill:rgb(138,43,226);" />
                            <rect x="1183.4" y="74.7" width="24.4" height="24.65" style="fill:rgb(138,43,226);" />
                            <rect x="1207.8" y="74.7" width="36.6" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="0" y="99.1" width="36.6" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="36.6" y="99.1" width="1171.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1207.8" y="99.1" width="36.6" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="0" y="123.5" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="24.4" y="123.5" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="48.8" y="123.5" width="146.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="195.2" y="123.5" width="890.6" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1085.8" y="123.5" width="109.8" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1195.6" y="123.5" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1220" y="123.5" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="0" y="147.9" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="24.4" y="147.9" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="36.6" y="147.9" width="61" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="97.6" y="147.9" width="48.8" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="146.4" y="147.9" width="244" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="390.4" y="147.9" width="12.2" height="24.65" style="fill:rgb(85,41,86);" />
                            <rect x="402.6" y="147.9" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="427" y="147.9" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="439.2" y="147.9" width="85.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="524.6" y="147.9" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="536.8" y="147.9" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="561.2" y="147.9" width="48.8" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="610" y="147.9" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="622.2" y="147.9" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="646.6" y="147.9" width="61" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="707.6" y="147.9" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="732" y="147.9" width="48.8" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="780.8" y="147.9" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="805.2" y="147.9" width="48.8" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="854" y="147.9" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="878.4" y="147.9" width="85.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="963.8" y="147.9" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="976" y="147.9" width="231.8" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1207.8" y="147.9" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1220" y="147.9" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="0" y="172.3" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="24.4" y="172.3" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="36.6" y="172.3" width="61" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="97.6" y="172.3" width="183" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="280.6" y="172.3" width="109.8" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="390.4" y="172.3" width="12.2" height="24.65" style="fill:rgb(85,41,86);" />
                            <rect x="402.6" y="172.3" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="427" y="172.3" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="439.2" y="172.3" width="97.6" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="536.8" y="172.3" width="671" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1207.8" y="172.3" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1220" y="172.3" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="0" y="196.7" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="24.4" y="196.7" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="36.6" y="196.7" width="61" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="97.6" y="196.7" width="109.8" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="207.4" y="196.7" width="183" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="390.4" y="196.7" width="12.2" height="24.65" style="fill:rgb(85,41,86);" />
                            <rect x="402.6" y="196.7" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="427" y="196.7" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="439.2" y="196.7" width="207.4" height="24.65" style="fill:rgb(119,38,196);" />
                            <rect x="646.6" y="196.7" width="268.4" height="24.65" style="fill:rgb(29,20,52);" />
                            <rect x="915" y="196.7" width="280.6" height="24.65" style="fill:rgb(28,18,52);" />
                            <rect x="1195.6" y="196.7" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1207.8" y="196.7" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1220" y="196.7" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="0" y="221.1" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="24.4" y="221.1" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="36.6" y="221.1" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="61" y="221.1" width="195.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="256.2" y="221.1" width="134.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="390.4" y="221.1" width="12.2" height="24.65" style="fill:rgb(85,41,86);" />
                            <rect x="402.6" y="221.1" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="427" y="221.1" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="439.2" y="221.1" width="207.4" height="24.65" style="fill:rgb(88,31,148);" />
                            <rect x="646.6" y="221.1" width="268.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="915" y="221.1" width="292.8" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1207.8" y="221.1" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1220" y="221.1" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="0" y="245.5" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="24.4" y="245.5" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="36.6" y="245.5" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="61" y="245.5" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="85.4" y="245.5" width="73.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="158.6" y="245.5" width="231.8" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="390.4" y="245.5" width="12.2" height="24.65" style="fill:rgb(85,41,86);" />
                            <rect x="402.6" y="245.5" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="427" y="245.5" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="439.2" y="245.5" width="207.4" height="24.65" style="fill:rgb(88,31,148);" />
                            <rect x="646.6" y="245.5" width="268.4" height="24.65" style="fill:rgb(33,19,60);" />
                            <rect x="915" y="245.5" width="280.6" height="24.65" style="fill:rgb(28,18,52);" />
                            <rect x="1195.6" y="245.5" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1207.8" y="245.5" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1220" y="245.5" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="0" y="269.9" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="24.4" y="269.9" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="36.6" y="269.9" width="48.8" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="85.4" y="269.9" width="61" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="146.4" y="269.9" width="85.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="231.8" y="269.9" width="158.6" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="390.4" y="269.9" width="12.2" height="24.65" style="fill:rgb(85,41,86);" />
                            <rect x="402.6" y="269.9" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="427" y="269.9" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="439.2" y="269.9" width="207.4" height="24.65" style="fill:rgb(88,31,148);" />
                            <rect x="646.6" y="269.9" width="268.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="915" y="269.9" width="292.8" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1207.8" y="269.9" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1220" y="269.9" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="0" y="294.3" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="24.4" y="294.3" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="36.6" y="294.3" width="48.8" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="85.4" y="294.3" width="61" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="146.4" y="294.3" width="85.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="231.8" y="294.3" width="158.6" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="390.4" y="294.3" width="12.2" height="24.65" style="fill:rgb(85,41,86);" />
                            <rect x="402.6" y="294.3" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="427" y="294.3" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="439.2" y="294.3" width="768.6" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1207.8" y="294.3" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1220" y="294.3" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="0" y="318.7" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="24.4" y="318.7" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="36.6" y="318.7" width="48.8" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="85.4" y="318.7" width="73.2" height="24.65" style="fill:rgb(47,45,81);" />
                            <rect x="158.6" y="318.7" width="73.2" height="24.65" style="fill:rgb(47,45,81);" />
                            <rect x="231.8" y="318.7" width="158.6" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="390.4" y="318.7" width="12.2" height="24.65" style="fill:rgb(85,41,86);" />
                            <rect x="402.6" y="318.7" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="427" y="318.7" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="439.2" y="318.7" width="12.2" height="24.65" style="fill:rgb(30,30,63);" />
                            <rect x="451.4" y="318.7" width="48.8" height="24.65" style="fill:rgb(30,30,63);" />
                            <rect x="500.2" y="318.7" width="195.2" height="24.65" style="fill:rgb(30,30,63);" />
                            <rect x="695.4" y="318.7" width="12.2" height="24.65" style="fill:rgb(30,30,63);" />
                            <rect x="707.6" y="318.7" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="719.8" y="318.7" width="12.2" height="24.65" style="fill:rgb(30,30,63);" />
                            <rect x="732" y="318.7" width="61" height="24.65" style="fill:rgb(30,30,63);" />
                            <rect x="793" y="318.7" width="183" height="24.65" style="fill:rgb(30,30,63);" />
                            <rect x="976" y="318.7" width="12.2" height="24.65" style="fill:rgb(30,30,63);" />
                            <rect x="988.2" y="318.7" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1000.4" y="318.7" width="24.4" height="24.65" style="fill:rgb(58,24,101);" />
                            <rect x="1024.8" y="318.7" width="146.4" height="24.65" style="fill:rgb(58,24,101);" />
                            <rect x="1171.2" y="318.7" width="24.4" height="24.65" style="fill:rgb(58,24,101);" />
                            <rect x="1195.6" y="318.7" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1207.8" y="318.7" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1220" y="318.7" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="0" y="343.1" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="24.4" y="343.1" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="36.6" y="343.1" width="48.8" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="85.4" y="343.1" width="61" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="146.4" y="343.1" width="158.6" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="305" y="343.1" width="85.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="390.4" y="343.1" width="12.2" height="24.65" style="fill:rgb(85,41,86);" />
                            <rect x="402.6" y="343.1" width="817.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1220" y="343.1" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="0" y="367.5" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="24.4" y="367.5" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="36.6" y="367.5" width="48.8" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="85.4" y="367.5" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="109.8" y="367.5" width="109.8" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="219.6" y="367.5" width="170.8" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="390.4" y="367.5" width="12.2" height="24.65" style="fill:rgb(85,41,86);" />
                            <rect x="402.6" y="367.5" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="414.8" y="367.5" width="488" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="902.8" y="367.5" width="122" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1024.8" y="367.5" width="158.6" height="24.65" style="fill:rgb(0,250,154);" />
                            <rect x="1183.4" y="367.5" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1195.6" y="367.5" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1220" y="367.5" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="0" y="391.9" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="24.4" y="391.9" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="36.6" y="391.9" width="73.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="109.8" y="391.9" width="61" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="170.8" y="391.9" width="146.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="317.2" y="391.9" width="73.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="390.4" y="391.9" width="12.2" height="24.65" style="fill:rgb(85,41,86);" />
                            <rect x="402.6" y="391.9" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="414.8" y="391.9" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="427" y="391.9" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="439.2" y="391.9" width="48.8" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="488" y="391.9" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="512.4" y="391.9" width="85.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="597.8" y="391.9" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="622.2" y="391.9" width="85.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="707.6" y="391.9" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="732" y="391.9" width="61" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="793" y="391.9" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="805.2" y="391.9" width="402.6" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1207.8" y="391.9" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1220" y="391.9" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="0" y="416.3" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="24.4" y="416.3" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="36.6" y="416.3" width="73.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="109.8" y="416.3" width="61" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="170.8" y="416.3" width="219.6" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="390.4" y="416.3" width="12.2" height="24.65" style="fill:rgb(85,41,86);" />
                            <rect x="402.6" y="416.3" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="414.8" y="416.3" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="427" y="416.3" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="439.2" y="416.3" width="48.8" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="488" y="416.3" width="719.8" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1207.8" y="416.3" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1220" y="416.3" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="0" y="440.7" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="24.4" y="440.7" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="36.6" y="440.7" width="73.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="109.8" y="440.7" width="61" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="170.8" y="440.7" width="170.8" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="341.6" y="440.7" width="48.8" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="390.4" y="440.7" width="12.2" height="24.65" style="fill:rgb(85,41,86);" />
                            <rect x="402.6" y="440.7" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="414.8" y="440.7" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="427" y="440.7" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="439.2" y="440.7" width="36.6" height="24.65" style="fill:rgb(24,24,39);" />
                            <rect x="475.8" y="440.7" width="12.2" height="24.65" style="fill:rgb(82,82,88);" />
                            <rect x="488" y="440.7" width="707.6" height="24.65" style="fill:rgb(24,24,39);" />
                            <rect x="1195.6" y="440.7" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1207.8" y="440.7" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1220" y="440.7" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="0" y="465.1" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="24.4" y="465.1" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="36.6" y="465.1" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="61" y="465.1" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="85.4" y="465.1" width="73.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="158.6" y="465.1" width="231.8" height="24.65" style="fill:rgb(15,15,31);" />
                            <g transform="matrix(1,0,0,0.877927,0,56.776)">
                                <rect x="390.4" y="465.1" width="12.2" height="24.65" style="fill:rgb(85,41,86);" />
                            </g>
                            <rect x="402.6" y="465.1" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="414.8" y="465.1" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="427" y="465.1" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="439.2" y="465.1" width="36.6" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="475.8" y="465.1" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="500.2" y="465.1" width="85.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="585.6" y="465.1" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="610" y="465.1" width="61" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="671" y="465.1" width="524.6" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1195.6" y="465.1" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1207.8" y="465.1" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1220" y="465.1" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="0" y="489.5" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="24.4" y="489.5" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="36.6" y="489.5" width="48.8" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="85.4" y="489.5" width="61" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="146.4" y="489.5" width="85.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="231.8" y="489.5" width="158.6" height="24.65" style="fill:rgb(15,15,31);" />
                            <g transform="matrix(1,0,0,1.15317,0,-78.7529)">
                                <rect x="390.4" y="489.5" width="12.2" height="24.65" style="fill:rgb(13,14,46);" />
                            </g>
                            <rect x="402.6" y="489.5" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="414.8" y="489.5" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="427" y="489.5" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="439.2" y="489.5" width="36.6" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="475.8" y="489.5" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="500.2" y="489.5" width="73.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="573.4" y="489.5" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="597.8" y="489.5" width="61" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="658.8" y="489.5" width="536.8" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1195.6" y="489.5" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1207.8" y="489.5" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1220" y="489.5" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="0" y="513.9" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="24.4" y="513.9" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="36.6" y="513.9" width="48.8" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="85.4" y="513.9" width="61" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="146.4" y="513.9" width="85.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="231.8" y="513.9" width="158.6" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="390.4" y="513.9" width="12.2" height="24.65" style="fill:rgb(13,14,46);" />
                            <rect x="402.6" y="513.9" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="414.8" y="513.9" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="427" y="513.9" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="439.2" y="513.9" width="36.6" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="475.8" y="513.9" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="500.2" y="513.9" width="97.6" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="597.8" y="513.9" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="622.2" y="513.9" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="634.4" y="513.9" width="561.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1195.6" y="513.9" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1207.8" y="513.9" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1220" y="513.9" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="0" y="538.3" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="24.4" y="538.3" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="36.6" y="538.3" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="61" y="538.3" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="85.4" y="538.3" width="73.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="158.6" y="538.3" width="231.8" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="390.4" y="538.3" width="12.2" height="24.65" style="fill:rgb(13,14,46);" />
                            <rect x="402.6" y="538.3" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="414.8" y="538.3" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="427" y="538.3" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="439.2" y="538.3" width="36.6" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="475.8" y="538.3" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="500.2" y="538.3" width="48.8" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="549" y="538.3" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="573.4" y="538.3" width="36.6" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="610" y="538.3" width="585.6" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1195.6" y="538.3" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1207.8" y="538.3" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1220" y="538.3" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="0" y="562.7" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="24.4" y="562.7" width="390.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="414.8" y="562.7" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="427" y="562.7" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="439.2" y="562.7" width="36.6" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="475.8" y="562.7" width="12.2" height="24.65" style="fill:rgb(82,82,88);" />
                            <rect x="488" y="562.7" width="707.6" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1195.6" y="562.7" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1207.8" y="562.7" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1220" y="562.7" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="0" y="587.1" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="24.4" y="587.1" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="36.6" y="587.1" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="48.8" y="587.1" width="207.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="256.2" y="587.1" width="146.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="402.6" y="587.1" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="414.8" y="587.1" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="427" y="587.1" width="366" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="793" y="587.1" width="36.6" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="829.6" y="587.1" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="841.8" y="587.1" width="109.8" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="951.6" y="587.1" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="963.8" y="587.1" width="12.2" height="24.65" style="fill:rgb(24,24,39);" />
                            <rect x="976" y="587.1" width="48.8" height="24.65" style="fill:rgb(24,24,39);" />
                            <rect x="1024.8" y="587.1" width="12.2" height="24.65" style="fill:rgb(24,24,39);" />
                            <rect x="1037" y="587.1" width="12.2" height="24.65" style="fill:rgb(24,24,39);" />
                            <rect x="1049.2" y="587.1" width="12.2" height="24.65" style="fill:rgb(24,24,39);" />
                            <rect x="1061.4" y="587.1" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1073.6" y="587.1" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1085.8" y="587.1" width="61" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1146.8" y="587.1" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1159" y="587.1" width="12.2" height="24.65" style="fill:rgb(48,48,59);" />
                            <rect x="1171.2" y="587.1" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1183.4" y="587.1" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1195.6" y="587.1" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1207.8" y="587.1" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1220" y="587.1" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="0" y="611.5" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="24.4" y="611.5" width="390.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="414.8" y="611.5" width="536.8" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="951.6" y="611.5" width="73.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1024.8" y="611.5" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1037" y="611.5" width="122" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1159" y="611.5" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1183.4" y="611.5" width="12.2" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1195.6" y="611.5" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1220" y="611.5" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="0" y="635.9" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="24.4" y="635.9" width="48.8" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="73.2" y="635.9" width="61" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="134.2" y="635.9" width="48.8" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="183" y="635.9" width="85.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="268.4" y="635.9" width="48.8" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="317.2" y="635.9" width="61" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="378.2" y="635.9" width="48.8" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="427" y="635.9" width="48.8" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="475.8" y="635.9" width="48.8" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="524.6" y="635.9" width="109.8" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="634.4" y="635.9" width="48.8" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="683.2" y="635.9" width="61" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="744.2" y="635.9" width="48.8" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="793" y="635.9" width="61" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="854" y="635.9" width="366" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="1220" y="635.9" width="24.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <rect x="0" y="660.3" width="1244.4" height="24.65" style="fill:rgb(15,15,31);" />
                            <g>
                                <g transform="matrix(1,0,0,1,36.6,44.4)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(255,147,221);">Posting</text>
                                </g>
                                <g transform="matrix(1,0,0,1,890.6,44.4)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(159,159,165);">darrenburns@posting.local</text>
                                </g>
                                <g transform="matrix(1,0,0,1,48.8,93.2)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(19,15,28);">P</text>
                                    <rect x="0" y="1.27" width="12.041" height="0.879" style="fill:rgb(19,15,28);" />
                                </g>
                                <g transform="matrix(1,0,0,1,61,93.2)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(19,15,28);">OST</text>
                                </g>
                                <g transform="matrix(1,0,0,1,146.4,93.2)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(60,46,88);">▼</text>
                                </g>
                                <g transform="matrix(1,0,0,1,183,93.2)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(255,105,180);">https</text>
                                </g>
                                <g transform="matrix(1,0,0,1,244,93.2)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(147,147,163);">://</text>
                                </g>
                                <g transform="matrix(1,0,0,1,280.6,93.2)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(147,112,219);">jsonplaceholder.typicode.com</text>
                                </g>
                                <g transform="matrix(1,0,0,1,622.2,93.2)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(147,147,163);">/</text>
                                </g>
                                <g transform="matrix(1,0,0,1,634.4,93.2)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(225,225,230);">posts</text>
                                </g>
                                <g transform="matrix(1,0,0,1,982.356,93.9035)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(0,250,154);">■
                                        <tspan x="14.021px 28.042px 42.063px 56.084px 70.105px 84.126px "
                                            y="0px 0px 0px 0px 0px 0px ">■■■■■■</tspan>
                                    </text>
                                </g>
                                <g transform="matrix(1,0,0,1,1110.2,93.2)">
                                    <text x="12.041px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(239,227,251);">Send</text>
                                </g>
                                <g transform="matrix(1,0,0,1,24.4,142)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(99,46,83);">╭─</text>
                                </g>
                                <g transform="matrix(1,0,0,1,48.8,142)">
                                    <text x="12.041px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(223,223,225);">Collection</text>
                                </g>
                                <g transform="matrix(0.996034,0,0,1,198.687,142)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(99,46,83);">─────────────────╮╭──────────────────────────────────────────────────────</text>
                                </g>
                                <g transform="matrix(1,0,0,1,1085.8,142)">
                                    <text x="12.041px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(223,223,225);">Request</text>
                                </g>
                                <g transform="matrix(1,0,0,1,1195.6,142)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(99,46,83);">─╮</text>
                                </g>
                                <g transform="matrix(1,0,0,1,24.4,166.4)">
                                    <clipPath id="_clip3">
                                        <rect x="-24.4" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip3)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(99,46,83);">│</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,36.6,166.4)">
                                    <text x="12.041px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(14,165,233);">GET</text>
                                </g>
                                <g transform="matrix(1,0,0,1,97.6,166.4)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(223,223,225);">echo</text>
                                </g>
                                <g transform="matrix(1,0,0,1,402.6,166.4)">
                                    <clipPath id="_clip4">
                                        <rect x="-402.6" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip4)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(99,46,83);">││</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,439.2,166.4)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(223,223,225);">Headers</text>
                                </g>
                                <g transform="matrix(1,0,0,1,524.6,166.4)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(88,209,235);">•</text>
                                </g>
                                <g transform="matrix(1,0,0,1,561.2,166.4)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(106,106,116);">Body</text>
                                </g>
                                <g transform="matrix(1,0,0,1,610,166.4)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(88,209,235);">•</text>
                                </g>
                                <g transform="matrix(1,0,0,1,646.6,166.4)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(106,106,116);">Query</text>
                                </g>
                                <g transform="matrix(1,0,0,1,732,166.4)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(106,106,116);">Auth</text>
                                </g>
                                <g transform="matrix(1,0,0,1,805.2,166.4)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(106,106,116);">Info</text>
                                </g>
                                <g transform="matrix(1,0,0,1,878.4,166.4)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(106,106,116);">Options</text>
                                </g>
                                <g transform="matrix(1,0,0,1,1207.8,166.4)">
                                    <clipPath id="_clip5">
                                        <rect x="-1207.8" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip5)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(99,46,83);">│</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,24.4,190.8)">
                                    <clipPath id="_clip6">
                                        <rect x="-24.4" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip6)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(99,46,83);">│</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,36.6,190.8)">
                                    <text x="12.041px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(14,165,233);">GET</text>
                                </g>
                                <g transform="matrix(1,0,0,1,97.6,190.8)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(223,223,225);">get random user</text>
                                </g>
                                <g transform="matrix(1,0,0,1,402.6,190.8)">
                                    <clipPath id="_clip7">
                                        <rect x="-402.6" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip7)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(99,46,83);">││</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,427,190.8)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(37,37,50);">╸</text>
                                </g>
                                <g transform="matrix(1,0,0,1,439.2,190.8)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(255,105,180);">━━━━━━━━</text>
                                </g>
                                <g transform="matrix(1,0,0,1,536.8,190.8)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(37,37,50);">╺━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━</text>
                                </g>
                                <g transform="matrix(1,0,0,1,1207.8,190.8)">
                                    <clipPath id="_clip8">
                                        <rect x="-1207.8" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip8)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(99,46,83);">│</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,24.4,215.2)">
                                    <clipPath id="_clip9">
                                        <rect x="-24.4" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip9)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(99,46,83);">│</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,36.6,215.2)">
                                    <text x="12.041px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(34,197,94);">POS</text>
                                </g>
                                <g transform="matrix(1,0,0,1,97.6,215.2)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(223,223,225);">echo post</text>
                                </g>
                                <g transform="matrix(1,0,0,1,402.6,215.2)">
                                    <clipPath id="_clip10">
                                        <rect x="-402.6" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip10)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(99,46,83);">││</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,427,215.2)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(15,15,31);">▐</text>
                                </g>
                                <g transform="matrix(1,0,0,1,439.2,215.2)">
                                    <text x="12.041px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(237,226,247);">Content-Type</text>
                                </g>
                                <g transform="matrix(1,0,0,1,646.6,215.2)">
                                    <text x="12.041px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(225,224,228);">application/json</text>
                                </g>
                                <g transform="matrix(1,0,0,1,1207.8,215.2)">
                                    <clipPath id="_clip11">
                                        <rect x="-1207.8" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip11)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(99,46,83);">│</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,24.4,239.6)">
                                    <clipPath id="_clip12">
                                        <rect x="-24.4" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip12)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(99,46,83);">│</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,36.6,239.6)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(139,139,147);">▼</text>
                                </g>
                                <g transform="matrix(1,0,0,1,61,239.6)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(139,139,147);">jsonplaceholder/</text>
                                </g>
                                <g transform="matrix(1,0,0,1,402.6,239.6)">
                                    <clipPath id="_clip13">
                                        <rect x="-402.6" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip13)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(99,46,83);">││</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,427,239.6)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(15,15,31);">▐</text>
                                </g>
                                <g transform="matrix(1,0,0,1,439.2,239.6)">
                                    <text x="12.041px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(233,225,241);">Referer</text>
                                </g>
                                <g transform="matrix(1,0,0,1,646.6,239.6)">
                                    <text x="12.041px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(223,223,225);">https://example.com/</text>
                                </g>
                                <g transform="matrix(1,0,0,1,1207.8,239.6)">
                                    <clipPath id="_clip14">
                                        <rect x="-1207.8" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip14)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(99,46,83);">│</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,24.4,264)">
                                    <clipPath id="_clip15">
                                        <rect x="-24.4" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip15)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(99,46,83);">│</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,61,264)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(139,139,147);">▼</text>
                                </g>
                                <g transform="matrix(1,0,0,1,85.4,264)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(139,139,147);">posts/</text>
                                </g>
                                <g transform="matrix(1,0,0,1,402.6,264)">
                                    <clipPath id="_clip16">
                                        <rect x="-402.6" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip16)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(99,46,83);">││</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,427,264)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(15,15,31);">▐</text>
                                </g>
                                <g transform="matrix(1,0,0,1,439.2,264)">
                                    <text x="12.041px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(233,225,241);">Accept-Encoding</text>
                                </g>
                                <g transform="matrix(1,0,0,1,646.6,264)">
                                    <text x="12.041px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(226,224,229);">gzip</text>
                                </g>
                                <g transform="matrix(1,0,0,1,1207.8,264)">
                                    <clipPath id="_clip17">
                                        <rect x="-1207.8" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip17)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(99,46,83);">│</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,24.4,288.4)">
                                    <clipPath id="_clip18">
                                        <rect x="-24.4" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip18)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(99,46,83);">│</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,85.4,288.4)">
                                    <text x="12.041px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(14,165,233);">GET</text>
                                </g>
                                <g transform="matrix(1,0,0,1,146.4,288.4)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(223,223,225);">get all</text>
                                </g>
                                <g transform="matrix(1,0,0,1,402.6,288.4)">
                                    <clipPath id="_clip19">
                                        <rect x="-402.6" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip19)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(99,46,83);">││</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,427,288.4)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(15,15,31);">▐</text>
                                </g>
                                <g transform="matrix(1,0,0,1,439.2,288.4)">
                                    <text x="12.041px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(233,225,241);">Cache-Control</text>
                                </g>
                                <g transform="matrix(1,0,0,1,646.6,288.4)">
                                    <text x="12.041px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(223,223,225);">no-cache</text>
                                </g>
                                <g transform="matrix(1,0,0,1,1207.8,288.4)">
                                    <clipPath id="_clip20">
                                        <rect x="-1207.8" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip20)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(99,46,83);">│</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,24.4,312.8)">
                                    <clipPath id="_clip21">
                                        <rect x="-24.4" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip21)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(99,46,83);">│</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,85.4,312.8)">
                                    <text x="12.041px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(14,165,233);">GET</text>
                                </g>
                                <g transform="matrix(1,0,0,1,146.4,312.8)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(223,223,225);">get one</text>
                                </g>
                                <g transform="matrix(1,0,0,1,402.6,312.8)">
                                    <clipPath id="_clip22">
                                        <rect x="-402.6" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip22)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(99,46,83);">││</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,427,312.8)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(15,15,31);">▐</text>
                                </g>
                                <g transform="matrix(1,0,0,1,1207.8,312.8)">
                                    <clipPath id="_clip23">
                                        <rect x="-1207.8" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip23)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(99,46,83);">│</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,24.4,337.2)">
                                    <clipPath id="_clip24">
                                        <rect x="-24.4" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip24)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(99,46,83);">│</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,85.4,337.2)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(155,154,171);">█ POS</text>
                                </g>
                                <g transform="matrix(1,0,0,1,158.6,337.2)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(227,227,232);">create</text>
                                </g>
                                <g transform="matrix(1,0,0,1,402.6,337.2)">
                                    <clipPath id="_clip25">
                                        <rect x="-402.6" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip25)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(99,46,83);">││</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,451.4,337.2)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(115,115,135);">Name</text>
                                </g>
                                <g transform="matrix(1,0,0,1,732,337.2)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(115,115,135);">Value</text>
                                </g>
                                <g transform="matrix(1,0,0,1,1024.8,337.2)">
                                    <text x="12.041px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(145,141,157);">Add header</text>
                                </g>
                                <g transform="matrix(1,0,0,1,1207.8,337.2)">
                                    <clipPath id="_clip26">
                                        <rect x="-1207.8" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip26)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(99,46,83);">│</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,24.4,361.6)">
                                    <clipPath id="_clip27">
                                        <rect x="-24.4" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip27)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(99,46,83);">│</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,85.4,361.6)">
                                    <text x="12.041px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(239,68,68);">DEL</text>
                                </g>
                                <g transform="matrix(1,0,0,1,146.4,361.6)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(223,223,225);">delete a post</text>
                                </g>
                                <g transform="matrix(1.01332,0,0,1,402.53,361.6)">
                                    <clipPath id="_clip28">
                                        <rect x="-402.6" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip28)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(99,46,83);">│╰────────────────────────────────────────────────────────────────╯</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,24.4,386)">
                                    <clipPath id="_clip29">
                                        <rect x="-24.4" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip29)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(99,46,83);">│</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,85.4,386)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(139,139,147);">▼</text>
                                </g>
                                <g transform="matrix(1,0,0,1,109.8,386)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(139,139,147);">comments/</text>
                                </g>
                                <g transform="matrix(1,0,0,1,402.6,386)">
                                    <clipPath id="_clip30">
                                        <rect x="-402.6" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip30)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(99,46,83);">│</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,414.8,386)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(255,105,180);">╭───────────────────────────────────────</text>
                                </g>
                                <g transform="matrix(1,0,0,1,902.8,386)">
                                    <text x="12.041px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(223,223,225);">Response</text>
                                </g>
                                <g transform="matrix(1,0,0,1,1024.8,386)">
                                    <text x="12.041px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(0,32,20);">201 Created</text>
                                </g>
                                <g transform="matrix(1,0,0,1,1195.6,386)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(255,105,180);">─╮</text>
                                </g>
                                <g transform="matrix(1,0,0,1,24.4,410.4)">
                                    <clipPath id="_clip31">
                                        <rect x="-24.4" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip31)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(99,46,83);">│</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,109.8,410.4)">
                                    <text x="12.041px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(14,165,233);">GET</text>
                                </g>
                                <g transform="matrix(1,0,0,1,170.8,410.4)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(223,223,225);">get comments</text>
                                </g>
                                <g transform="matrix(1,0,0,1,402.6,410.4)">
                                    <clipPath id="_clip32">
                                        <rect x="-402.6" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip32)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(99,46,83);">│</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,414.8,410.4)">
                                    <clipPath id="_clip33">
                                        <rect x="-414.8" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip33)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(255,105,180);">│</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,439.2,410.4)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(223,223,225);">Body</text>
                                </g>
                                <g transform="matrix(1,0,0,1,512.4,410.4)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(106,106,116);">Headers</text>
                                </g>
                                <g transform="matrix(1,0,0,1,622.2,410.4)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(106,106,116);">Cookies</text>
                                </g>
                                <g transform="matrix(1,0,0,1,732,410.4)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(106,106,116);">Trace</text>
                                </g>
                                <g transform="matrix(1,0,0,1,1207.8,410.4)">
                                    <clipPath id="_clip34">
                                        <rect x="-1207.8" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip34)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(255,105,180);">│</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,24.4,434.8)">
                                    <clipPath id="_clip35">
                                        <rect x="-24.4" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip35)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(99,46,83);">│</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,109.8,434.8)">
                                    <text x="12.041px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(14,165,233);">GET</text>
                                </g>
                                <g transform="matrix(1,0,0,1,170.8,434.8)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(223,223,225);">get comments (via</text>
                                </g>
                                <g transform="matrix(1,0,0,1,402.6,434.8)">
                                    <clipPath id="_clip36">
                                        <rect x="-402.6" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip36)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(99,46,83);">│</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,414.8,434.8)">
                                    <clipPath id="_clip37">
                                        <rect x="-414.8" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip37)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(255,105,180);">│</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,427,434.8)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(135,60,105);">╸</text>
                                </g>
                                <g transform="matrix(1,0,0,1,439.2,434.8)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(255,105,180);">━━━━</text>
                                </g>
                                <g transform="matrix(1,0,0,1,488,434.8)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(135,60,105);">╺━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━</text>
                                </g>
                                <g transform="matrix(1,0,0,1,1207.8,434.8)">
                                    <clipPath id="_clip38">
                                        <rect x="-1207.8" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip38)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(255,105,180);">│</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,24.4,459.2)">
                                    <clipPath id="_clip39">
                                        <rect x="-24.4" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip39)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(99,46,83);">│</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,109.8,459.2)">
                                    <text x="12.041px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(245,158,11);">PUT</text>
                                </g>
                                <g transform="matrix(1,0,0,1,170.8,459.2)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(223,223,225);">edit a comment</text>
                                </g>
                                <g transform="matrix(1,0,0,1,402.6,459.2)">
                                    <clipPath id="_clip40">
                                        <rect x="-402.6" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip40)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(99,46,83);">│</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,414.8,459.2)">
                                    <clipPath id="_clip41">
                                        <rect x="-414.8" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip41)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(255,105,180);">│</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,439.2,459.2)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(162,162,168);">1</text>
                                </g>
                                <g transform="matrix(1,0,0,1,475.8,459.2)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(232,232,233);">{</text>
                                </g>
                                <g transform="matrix(1,0,0,1,1207.8,459.2)">
                                    <clipPath id="_clip42">
                                        <rect x="-1207.8" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip42)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(255,105,180);">│</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,24.4,483.6)">
                                    <clipPath id="_clip43">
                                        <rect x="-24.4" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip43)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(99,46,83);">│</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,61,483.6)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(139,139,147);">▼</text>
                                </g>
                                <g transform="matrix(1,0,0,1,85.4,483.6)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(139,139,147);">todos/</text>
                                </g>
                                <g transform="matrix(1,0,0,1,390.4,483.6)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(13,14,46);">▆</text>
                                </g>
                                <g transform="matrix(1,0,0,1,402.6,483.6)">
                                    <clipPath id="_clip44">
                                        <rect x="-402.6" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip44)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(99,46,83);">│</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,414.8,483.6)">
                                    <clipPath id="_clip45">
                                        <rect x="-414.8" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip45)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(255,105,180);">│</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,439.2,483.6)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(111,111,120);">2</text>
                                </g>
                                <g transform="matrix(1,0,0,1,500.2,483.6)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(255,121,198);">&quot;title&quot;</text>
                                </g>
                                <g transform="matrix(1,0,0,1,585.6,483.6)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(223,223,225);">:</text>
                                </g>
                                <g transform="matrix(1,0,0,1,610,483.6)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(241,250,140);">&quot;foo&quot;</text>
                                </g>
                                <g transform="matrix(1,0,0,1,671,483.6)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(223,223,225);">,</text>
                                </g>
                                <g transform="matrix(1,0,0,1,1207.8,483.6)">
                                    <clipPath id="_clip46">
                                        <rect x="-1207.8" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip46)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(255,105,180);">│</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,24.4,508)">
                                    <clipPath id="_clip47">
                                        <rect x="-24.4" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip47)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(99,46,83);">│</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,85.4,508)">
                                    <text x="12.041px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(14,165,233);">GET</text>
                                </g>
                                <g transform="matrix(1,0,0,1,146.4,508)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(223,223,225);">get all</text>
                                </g>
                                <g transform="matrix(1,0,0,1,402.6,508)">
                                    <clipPath id="_clip48">
                                        <rect x="-402.6" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip48)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(99,46,83);">│</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,414.8,508)">
                                    <clipPath id="_clip49">
                                        <rect x="-414.8" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip49)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(255,105,180);">│</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,439.2,508)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(111,111,120);">3</text>
                                </g>
                                <g transform="matrix(1,0,0,1,500.2,508)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(255,121,198);">&quot;body&quot;</text>
                                </g>
                                <g transform="matrix(1,0,0,1,573.4,508)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(223,223,225);">:</text>
                                </g>
                                <g transform="matrix(1,0,0,1,597.8,508)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(241,250,140);">&quot;bar&quot;</text>
                                </g>
                                <g transform="matrix(1,0,0,1,658.8,508)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(223,223,225);">,</text>
                                </g>
                                <g transform="matrix(1,0,0,1,1207.8,508)">
                                    <clipPath id="_clip50">
                                        <rect x="-1207.8" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip50)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(255,105,180);">│</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,24.4,532.4)">
                                    <clipPath id="_clip51">
                                        <rect x="-24.4" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip51)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(99,46,83);">│</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,85.4,532.4)">
                                    <text x="12.041px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(14,165,233);">GET</text>
                                </g>
                                <g transform="matrix(1,0,0,1,146.4,532.4)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(223,223,225);">get one</text>
                                </g>
                                <g transform="matrix(1,0,0,1,402.6,532.4)">
                                    <clipPath id="_clip52">
                                        <rect x="-402.6" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip52)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(99,46,83);">│</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,414.8,532.4)">
                                    <clipPath id="_clip53">
                                        <rect x="-414.8" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip53)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(255,105,180);">│</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,439.2,532.4)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(111,111,120);">4</text>
                                </g>
                                <g transform="matrix(1,0,0,1,500.2,532.4)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(255,121,198);">&quot;userId&quot;</text>
                                </g>
                                <g transform="matrix(1,0,0,1,597.8,532.4)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(223,223,225);">:</text>
                                </g>
                                <g transform="matrix(1,0,0,1,622.2,532.4)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(189,147,249);">1</text>
                                </g>
                                <g transform="matrix(1,0,0,1,634.4,532.4)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(223,223,225);">,</text>
                                </g>
                                <g transform="matrix(1,0,0,1,1207.8,532.4)">
                                    <clipPath id="_clip54">
                                        <rect x="-1207.8" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip54)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(255,105,180);">│</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,24.4,556.8)">
                                    <clipPath id="_clip55">
                                        <rect x="-24.4" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip55)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(99,46,83);">│</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,61,556.8)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(139,139,147);">▼</text>
                                </g>
                                <g transform="matrix(1,0,0,1,85.4,556.8)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(139,139,147);">users/</text>
                                </g>
                                <g transform="matrix(1,0,0,1,402.6,556.8)">
                                    <clipPath id="_clip56">
                                        <rect x="-402.6" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip56)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(99,46,83);">│</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,414.8,556.8)">
                                    <clipPath id="_clip57">
                                        <rect x="-414.8" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip57)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(255,105,180);">│</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,439.2,556.8)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(111,111,120);">5</text>
                                </g>
                                <g transform="matrix(1,0,0,1,500.2,556.8)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(255,121,198);">&quot;id&quot;</text>
                                </g>
                                <g transform="matrix(1,0,0,1,549,556.8)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(223,223,225);">:</text>
                                </g>
                                <g transform="matrix(1,0,0,1,573.4,556.8)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(189,147,249);">101</text>
                                </g>
                                <g transform="matrix(1,0,0,1,1207.8,556.8)">
                                    <clipPath id="_clip58">
                                        <rect x="-1207.8" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip58)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(255,105,180);">│</text>
                                    </g>
                                </g>
                                <g transform="matrix(1.01316,0,0,1,24.3311,581.2)">
                                    <clipPath id="_clip59">
                                        <rect x="-24.4" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip59)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(99,46,83);">│──────────────────────────────│</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,414.8,581.2)">
                                    <clipPath id="_clip60">
                                        <rect x="-414.8" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip60)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(255,105,180);">│</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,439.2,581.2)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(111,111,120);">6</text>
                                </g>
                                <g transform="matrix(1,0,0,1,475.8,581.2)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(232,232,233);">}</text>
                                </g>
                                <g transform="matrix(1,0,0,1,1207.8,581.2)">
                                    <clipPath id="_clip61">
                                        <rect x="-1207.8" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip61)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(255,105,180);">│</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,24.4,605.6)">
                                    <clipPath id="_clip62">
                                        <rect x="-24.4" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip62)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(99,46,83);">│</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,48.8,605.6)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(159,159,165);">Create a new post</text>
                                </g>
                                <g transform="matrix(1,0,0,1,402.6,605.6)">
                                    <clipPath id="_clip63">
                                        <rect x="-402.6" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip63)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(99,46,83);">│</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,414.8,605.6)">
                                    <clipPath id="_clip64">
                                        <rect x="-414.8" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip64)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(255,105,180);">│</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,793,605.6)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(135,135,143);">1:1</text>
                                </g>
                                <g transform="matrix(1,0,0,1,841.8,605.6)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(159,159,165);">read-only</text>
                                </g>
                                <g transform="matrix(1,0,0,1,976,605.6)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(224,224,226);">JSON</text>
                                </g>
                                <g transform="matrix(1,0,0,1,1037,605.6)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(162,162,168);">▼</text>
                                </g>
                                <g transform="matrix(1,0,0,1,1085.8,605.6)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(223,223,225);">Wrap</text>
                                </g>
                                <g transform="matrix(1,0,0,1,1146.8,605.6)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(48,48,59);">▐</text>
                                </g>
                                <g transform="matrix(1,0,0,1,1159,605.6)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(0,250,154);">X</text>
                                </g>
                                <g transform="matrix(1,0,0,1,1171.2,605.6)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(48,48,59);">▌</text>
                                </g>
                                <g transform="matrix(1,0,0,1,1207.8,605.6)">
                                    <clipPath id="_clip65">
                                        <rect x="-1207.8" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip65)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(255,105,180);">│</text>
                                    </g>
                                </g>
                                <g transform="matrix(1.01328,0,0,1,24.3305,630)">
                                    <clipPath id="_clip66">
                                        <rect x="-24.4" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip66)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(99,46,83);">╰───────── sample-collections ─╯</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,414.8,630)">
                                    <clipPath id="_clip67">
                                        <rect x="-414.8" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip67)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(255,105,180);">╰───────────────────────────────────────────</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,951.6,630)">
                                    <text x="12.041px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(159,159,165);">65.00</text>
                                </g>
                                <g transform="matrix(1,0,0,1,1024.8,630)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(101,101,111);">B</text>
                                </g>
                                <g transform="matrix(1,0,0,1,1037,630)">
                                    <text x="12.041px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(159,159,165);">in 524.34</text>
                                </g>
                                <g transform="matrix(1,0,0,1,1159,630)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(101,101,111);">ms</text>
                                </g>
                                <g transform="matrix(1,0,0,1,1195.6,630)">
                                    <clipPath id="_clip68">
                                        <rect x="-1195.6" y="-18.5" width="1244.4" height="24.65" />
                                    </clipPath>
                                    <g clip-path="url(#_clip68)">
                                        <text x="0px" y="0px"
                                            style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(255,105,180);">─╯</text>
                                    </g>
                                </g>
                                <g transform="matrix(1,0,0,1,24.4,654.4)">
                                    <text x="12.041px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(255,126,200);">^j</text>
                                </g>
                                <g transform="matrix(1,0,0,1,73.2,654.4)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(219,219,221);">Send</text>
                                </g>
                                <g transform="matrix(1,0,0,1,134.2,654.4)">
                                    <text x="12.041px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(255,126,200);">^t</text>
                                </g>
                                <g transform="matrix(1,0,0,1,183,654.4)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(219,219,221);">Method</text>
                                </g>
                                <g transform="matrix(1,0,0,1,268.4,654.4)">
                                    <text x="12.041px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(255,126,200);">^s</text>
                                </g>
                                <g transform="matrix(1,0,0,1,317.2,654.4)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(219,219,221);">Save</text>
                                </g>
                                <g transform="matrix(1,0,0,1,378.2,654.4)">
                                    <text x="12.041px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(255,126,200);">^n</text>
                                </g>
                                <g transform="matrix(1,0,0,1,427,654.4)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(219,219,221);">New</text>
                                </g>
                                <g transform="matrix(1,0,0,1,475.8,654.4)">
                                    <text x="12.041px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(255,126,200);">^p</text>
                                </g>
                                <g transform="matrix(1,0,0,1,524.6,654.4)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(219,219,221);">Commands</text>
                                </g>
                                <g transform="matrix(1,0,0,1,634.4,654.4)">
                                    <text x="12.041px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(255,126,200);">^o</text>
                                </g>
                                <g transform="matrix(1,0,0,1,683.2,654.4)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(219,219,221);">Jump</text>
                                </g>
                                <g transform="matrix(1,0,0,1,744.2,654.4)">
                                    <text x="12.041px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(255,126,200);">f1</text>
                                </g>
                                <g transform="matrix(1,0,0,1,793,654.4)">
                                    <text x="0px" y="0px"
                                        style="font-family:'Menlo-Regular', 'Menlo', monospace;font-size:20px;fill:rgb(219,219,221);">Help</text>
                                </g>
                            </g>
                        </g>
                    </g>
                </g>
                <defs>
                    <linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse"
                        gradientTransform="matrix(1.89963e-14,-310.232,310.232,1.89963e-14,572.109,235.028)">
                        <stop offset="0" style="stop-color:rgb(82,0,76);stop-opacity:1" />
                        <stop offset="0.43" style="stop-color:rgb(136,43,128);stop-opacity:1" />
                        <stop offset="1" style="stop-color:rgb(255,138,244);stop-opacity:1" />
                    </linearGradient>
                </defs>
            </svg>
        </div> <!-- end of hero-image -->

        <div class="hero-text">
            <h1 id="home-title">The API client that lives in your terminal.</h1>
            <p id="home-subtitle">Posting is a beautiful <span class="subtle-purple-glow"
                    data-text="open-source">open-source</span> terminal app for developing and testing APIs.</p>
            <p id="home-intro">
                Fly through your API workflow with an approachable yet powerful <strong
                    class="gradient-text">keyboard-centric</strong> interface. Run it locally or <strong
                    class="gradient-text">over SSH</strong> on remote machines and containers.
                Save your requests in a readable and <strong class="gradient-text">version-control friendly</strong>
                format.
            </p>

            <div class="button-bar">
                <a href="#feature-title-1" title="Scroll to Features" class="posting-button">
                    Discover Features
                </a>
                <a href="/guide" title="Posting Documentation" class="posting-button">
                    Get Started
                </a>
            </div>
        </div> <!-- end of .hero-text -->

        <div id="features-section">

            <div class="feature-row">
                <div class="feature-text">
                    <h2 id="feature-title-1" class="feature-title">
                        <span class="feature-title-text" data-text="Designed for efficient workflows">Designed for
                            efficient workflows</span>
                    </h2>
                    <p class="feature-description">
                        Navigate intuitively and efficiently with the keyboard using <span data-text="jump mode"
                            class="gradient-text subtle-purple-glow">jump mode</span>.
                    </p>
                    <p class="feature-description">
                        Access commands from anywhere using the built-in <span data-text="command palette"
                            class="gradient-text subtle-purple-glow">command palette</span>.
                    </p>

                    <p class="feature-description">
                        Build requests quickly with powerful <span data-text="autocompletion"
                            class="gradient-text subtle-purple-glow">autocompletion</span>.
                    </p>

                    <p class="feature-description">
                        Edit a request body in <span data-text="nvim"
                            class="gradient-text subtle-purple-glow monospace">nvim</span> or browse a JSON response in
                        <span data-text="fx" class="gradient-text subtle-purple-glow monospace">fx</span>? No problem!
                    </p>

                    <p class="feature-description">
                        Import <span data-text="curl" class="gradient-text subtle-purple-glow monospace">curl</span>
                        commands into Posting by simply pasting into the URL bar.
                        Export requests to curl in seconds.
                    </p>
                    <!-- move the version control text to a different section -->
                    <!-- <p class="feature-description">
            After saving a request, check it into <span data-text="version control" class="gradient-text subtle-purple-glow">version control</span> - requests live on your file system, in diffable and easy to read YAML files.
          </p> -->
                </div>
                <div class="feature-image">
                    <video src="assets/home-efficiency-video.mp4" alt="Posting's jump mode feature in action" autoplay
                        loop muted playsinline></video>
                </div>
            </div>

            <div class="feature-row">
                <div class="feature-text">
                    <h2 class="feature-title">
                        <span class="feature-title-text" data-text="Colorful & customizable">Colorful &
                            customizable</span>
                    </h2>
                    <p class="feature-description">
                        Use <span data-text="compact mode" class="gradient-text subtle-purple-glow">compact mode</span>
                        to fit more on screen.
                    </p>
                    <p class="feature-description">
                        Create your own <span data-text="themes" class="gradient-text subtle-purple-glow">themes</span>,
                        or choose from a selection of built-in options.
                    </p>
                    <p class="feature-description">
                        Gorgeous <span data-text="Syntax highlighting" class="gradient-text subtle-purple-glow">syntax
                            highlighting</span> powered by the popular tree-sitter library.
                    </p>
                    <p class="feature-description">
                        Adjust the user interface to your liking through the <span data-text="configuration system"
                            class="gradient-text subtle-purple-glow">configuration system</span> or at runtime.
                    </p>
                    <p class="feature-description">
                        Customize keybindings to your liking using the <span data-text="keymap"
                            class="gradient-text subtle-purple-glow">keymap</span> system.
                    </p>
                </div>
                <div class="feature-image">
                    <video src="assets/compact-mode-and-themes.mp4"
                        alt="A video showing Posting's compact mode and themes in action via the command palette."
                        autoplay loop muted playsinline></video>
                </div>
            </div>

            <div class="feature-row">
                <div class="feature-text">
                    <h2 class="feature-title">Environments</h2>
                    <p class="feature-description">
                        Share common data across requests and with others using <span data-text="environments"
                            class="gradient-text subtle-purple-glow">environments</span>.
                    </p>
                    <p class="feature-description">
                        Load variables from one or more <span data-text="dotenv"
                            class="gradient-text subtle-purple-glow">dotenv</span> environment files, or allow access to
                        <span data-text="environment variables" class="gradient-text subtle-purple-glow">environment
                            variables</span>.
                    </p>
                    <p class="feature-description">
                        Edit variables in your favorite editor, and Posting will <span data-text="hot reload"
                            class="gradient-text subtle-purple-glow">hot reload</span> them.
                    </p>
                </div>
                <div class="feature-image">
                    <video src="assets/environments.mp4" alt="Environments in action in the URL bar" autoplay loop muted
                        playsinline></video>
                </div>
            </div>

        </div> <!-- end of #features-section -->

        <section class="feature-columns">
            <div class="feature-column">
                <h3 class="feature-column-title">Contextual help</h3>
                <p class="feature-column-description">
                    Feeling lost? Press <kbd>f1</kbd> to learn keybindings and other useful information for the
                    currently focused widget.
                </p>
            </div>
            <div class="feature-column">
                <h3 class="feature-column-title">Scripting</h3>
                <p class="feature-column-description">
                    Run Python code before and after requests to prepare headers, set variables, and more.
                </p>
            </div>
            <div class="feature-column">
                <h3 class="feature-column-title">Runs where you need it</h3>
                <p class="feature-column-description">
                    Run it on macOS, Windows, and Linux. Install it locally, on a remote server, in a Docker container,
                    or even on a Raspberry Pi.
                </p>
            </div>
        </section>

        <section id="community-section">
            <h2>Community</h2>
            <p>
                Posting is a community-driven project with an <a href="/roadmap">open roadmap</a>.
            </p>
            <p>
                The roadmap is highly influenced by user feedback.
            </p>
            <p>
                Get involved on <a href="https://github.com/darrenburns/posting" target="_blank"
                    rel="noopener noreferrer">GitHub</a> by reporting bugs, suggesting features, <a
                    href="https://github.com/sponsors/darrenburns" target="_blank" rel="noopener noreferrer">sponsoring
                    development</a>, or contributing code.
            </p>
        </section>

        <style>
            #community-section {
                text-align: center;
                padding: 4rem 2rem;
                background-color: hsl(307deg 47% 17%) 89%;
            }

            #community-section h2 {
                font-size: 2.4rem;
                margin-bottom: 1.5rem;
                color: var(--md-default-fg-color);
            }

            #community-section p {
                font-size: 1.1rem;
                line-height: 1.6;
                color: var(--md-default-fg-color--light);
                margin-bottom: 1rem;
            }

            .footer {
                text-align: center;
                padding: 2rem;
                background-color: hsl(307deg 47% 17%) 89%;
                border-top: 1px solid var(--md-default-fg-color--lightest);
            }

            .footer-links {
                display: flex;
                justify-content: center;
                gap: 2rem;
                margin-bottom: 1rem;
            }

            .footer-links a {
                color: var(--md-accent-fg-color);
                text-decoration: none;
                display: flex;
                align-items: center;
                gap: 0.5rem;
            }

            .footer-links a:hover {
                text-decoration: underline;
            }

            .footer-copyright {
                color: var(--md-default-fg-color--light);
                font-size: 0.9rem;
            }
        </style>
        <footer class="footer">
            <div class="footer-links">
                <a href="https://github.com/darrenburns/posting" target="_blank" rel="noopener noreferrer">
                    <svg height="20" width="20" viewBox="0 0 16 16" fill="currentColor">
                        <path
                            d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68.78 1.23.78.74 0 1.31-.01 1.49-.01.16.65.62 1.09 1.17 1.14-.85.65-1.53 1.66-1.53 2.81 0 2.02 1.65 3.67 3.68 3.67 1.08 0 2.09-.35 2.79-.96.09-.71.35-1.36.35-2.04 0-1.23-.63-2.11-1.62-2.69z" />
                    </svg>
                    GitHub
                </a>
                <a href="https://github.com/darrenburns/posting/issues" target="_blank" rel="noopener noreferrer">
                    <svg height="20" width="20" viewBox="0 0 16 16" fill="currentColor">
                        <path d="M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z" />
                        <path fill-rule="evenodd"
                            d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zm4.879-2.773a.75.75 0 00-1.06-1.06L4.11 4.803a.75.75 0 000 1.06l1.06 1.06a.75.75 0 101.06-1.06L5.17 5.863h4.163a.75.75 0 000-1.5H5.17l1.209-1.09zm6.288 0a.75.75 0 00-1.06 1.06l1.06 1.06a.75.75 0 101.06-1.06l-1.06-1.06zm-3.56 3.975a.75.75 0 001.06-1.06l-1.06-1.06a.75.75 0 10-1.06 1.06l1.06 1.06z" />
                    </svg>
                    Issues
                </a>
            </div>
            <div class="footer-copyright">
                © 2025 Darren Burns
            </div>
        </footer>
    </div>
</section>

{% endblock %}
{% block content %}
{% endblock %}
{% block footer %}

{% endblock %}